<script setup>
import JSMpeg from "@/utils/jsmpeg.min.js";
import { ref, nextTick, computed, watch, onUnmounted } from "vue";

const props = defineProps({
  url: {
    type: String,
    default: "",
  },
});
// const wsHostPort = ref(window.config.wsHostPort)
// const videoRef = ref()
// const dataUrl = computed(() => wsHostPort.value + '?url=' + btoa(props.url))
// let jsMpeg = null
// const logout = () => {
//   if (jsMpeg) {
//     jsMpeg?.stop && (jsMpeg.stop())
//     jsMpeg?.destroy && (jsMpeg.destroy())
//   }
// }
// onUnmounted(() => {
//   logout()
// })

// watch(() => props.url, val => {
//   if (val) {
//     nextTick(() => {
//       setTimeout(() => {
//         jsMpeg = new JSMpeg.Player(wsHostPort.value + '?url=' + btoa(props.url), {
//           canvas: videoRef.value
//         })
//       }, 0);
//     })
//   } else {
//     logout()
//   }
// }, { immediate: true })
</script>

<template>
  <!-- <canvas class="jsmpeg video-box" ref="videoRef" :data-url="dataUrl">
  </canvas> -->
  <video class="video-box" controls>
    <source src="/video/A01.mp4" type="video/mp4" />
  </video>
</template>

<style lang="scss" scoped>
.video-box {
  width: 100%;
  aspect-ratio: 16 / 9;
}
</style>
